<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变</title>
    <style>
        p {
            white-space: pre;
        }

        div{
            width: 100px;
            height: 100px;
            border: 1px inset;
            margin-right: 2em;
        }
        .container{
            display: -webkit-flex;
            width: 100%;
            margin-bottom: 2em;
        }

        .lg1 {
            background-image: linear-gradient(#fff 0%, #000 100%);
        }

        .lg2 {
            background-image: linear-gradient(#fff 0%, #fff 50%, #000 50%, #000 100%);
        }

        .lg3 {
            background-image:
                linear-gradient(45deg,
                    #ff0000,
                    #ff6633,
                    #ffff00,
                    #00ff00,
                    #0000ff,
                    #aa00aa);
        }

        .webkit-lg {
            background-image: -webkit-gradient(linear,
                left bottom, right top,
                from(red),
                to(purple),
                color-stop(20%, orange),
                color-stop(40%, yellow),
                color-stop(60%, green),
                color-stop(80%, blue));
        }

        .rg {
            background-image: radial-gradient(circle, #fff, #000);
        }

        /*感觉语法已经变了呀*/
        .left-rg {
            background-image: radial-gradient(30px 30px, #fff, #000);
        }

        .webkit-rg1 {
            background-image: -webkit-gradient(radial,
                30 30, 10,
                30 30, 100,
                from(#fff),
                to(#000));
        }

        .webkit-rg2 {
            background-image: -webkit-gradient(radial,
                50 192, 87, 50 50, 23,
                from(#fff), to(#000));
        }

        .webkit-repeat-lg {
            background-image: -webkit-repeating-linear-gradient(left,
                rgba(0,0,0,1) 10%,
                rgba(255,255,255,1) 20%
            );
        }

        .webkit-repeat-rg {
            background-image: -webkit-repeating-radial-gradient(circle,
                rgba(0,0,0,1) 10%,
                rgba(255,255,255,1) 20%
            );
        }
    </style>
</head>
<body>
    <section>
        <p>语法：
             方向 0deg是右， 逆时针方向.
             不指定方向，默认是从上至下
             颜色 百分比 , 分隔 (有点像animation)
             如果省略百分比, 则均匀分布。
        </p>
        <div class="container">
            <div class="lg1"></div>
            <div class="lg2"></div>
            <div class="lg3"></div>
            <div class="webkit-lg"></div>
        </div>
    </section>
    <section>
        <p>
            圆形渐变：
            webkit老式语法
            第一个圆的位置, 半径，
            第二个圆的位置, 半径，
            from, to
            好吧，语法已经大变了。。。
        </p>
        <div class="container">
            <div class="rg"></div>
            <div class="left-rg"></div>
            <div class="webkit-rg1"></div>
            <div class="webkit-rg2"></div>
            <div class="webkit-repeat-lg"></div>
            <div class="webkit-repeat-rg"></div>
        </div>
    </section>
</body>
</html>